<template>
  <button class="fab-btn" @click="goCreatePost" title="发帖">
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="12" fill="var(--color-primary)" />
      <path d="M12 7v10M7 12h10" stroke="white" stroke-width="2" stroke-linecap="round" />
    </svg>
  </button>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function goCreatePost() {
  router.push({ name: 'post-create' })
}
</script>

<style scoped>
.fab-btn {
  position: fixed;
  right: 2.2rem;
  bottom: 2.2rem;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow:
    0 6px 24px 0 rgba(0, 0, 0, 0.18),
    0 1.5px 4px 0 rgba(0, 0, 0, 0.1);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    background 0.2s;
  outline: none;
}
.fab-btn:hover {
  background: var(--color-primary-hover);
  box-shadow:
    0 10px 32px 0 rgba(0, 0, 0, 0.22),
    0 2px 8px 0 rgba(0, 0, 0, 0.13);
}
svg {
  display: block;
}
</style>
